<!DOCTYPE html>
<html ng-app="BookMarketApp">
	<head>
		<meta http-equiv="charset" content="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="keywords" content="熊猫看看,xiongmao,pandacc">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta http-equiv="Conten-Language" content="zh-CN">
		<title>熊猫看看，京京不看</title>
		
		<link rel="icon" href="img/panda.png"></link>

		<!-- 引入css -->
		<link rel="stylesheet" type="text/css" href="css/core/bootstrap.min.css">

		<link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
	    <!-- <link href="https://fonts.googleapis.com/css?family=Roboto:500,300,700,400" rel="stylesheet" type="text/css"/> -->
	    <link href="css/main.css" rel="stylesheet" />
	</head>
	<body>
		<div class="header">
			<div class="container">
				<a href="/ireader/adu">
					<img src="img/logo.svg"  width="80" height="80">&#12501; &#65387; &#12488; &#12501; &#65387; &#12488;
				</a>
			</div>
		</div>

		<div class="main" ng-controller="BookController">
		  <div class="container">

		    <h1>{{ title }}</h1>
		    <h2>{{ promo }}</h2>

		    <div ng-repeat="product in products" class="col-md-4"> 
		      <div class="thumbnail"> 
		        <img ng-src="{{ product.cover }}"> 
		        <p class="title">{{ product.name }}</p> 
		        <p class="price">{{ product.price | currency }}</p> 
		        <p class="date">{{ product.pubdate | date }}
		        	<div class="rating">
		            <p class="likes" ng-click="plusOne($index)">+ {{product.likes}}</p>
		            <p class="dislikes" ng-click="minusOne($index)">- {{product.dislikes}}</p>
		        	</div>
		        </p> 
		      </div> 
		    </div>

		  </div>
		  
		  <div class="container">
			  <div ng-repeat="group in productGroups"  ng-class="{true:'row'}[productsIndex%3==0]">
				<p class="title">{{ group.groupName }}</p><br>
				<div ng-repeat="prod in group.groupDetails" class="col-md-4">
				<p ng-show="false">{{$parent.productsIndex=$index}}</P>
					<div class="thumbnail"> 
						<img ng-src="{{ prod.cover }}"> 
						<p class="title">{{ prod.name }}</p> 
						<p class="price">{{ prod.price | currency }}</p> 
						<p class="date">{{ prod.pubdate | date }}
							<div class="rating">
							<p class="likes" ng-click="plusOne($index)">+ {{prod.likes}}</p>
							<p class="dislikes" ng-click="minusOne($index)">- {{prod.dislikes}}</p>
							</div>
						</p> 
					</div>
				</div>
			  </div>
		  </div>
		</div>

		<div class="footer">
		  <div class="container">
		    <h2>Available for iPhone and Android.</h2>
		    <img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/app-store.png" width="120px" />
		    <img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/google-play.png" width="110px" />
		  </div>
		</div>

		<!-- jquery -->
		<script type="text/javascript" src="js/plugin/jquery/jquery-2.1.4.min.js"></script>
		<!-- bootstrap js -->
		<script type="text/javascript"  src="js/plugin/bootstrap/bootstrap.min.js"></script>

		<!-- angular core js -->
		<script type="text/javascript" src="js/plugin/angularjs/1.4.7/angular.min.js"></script>
		<script type="text/javascript" src="js/plugin/angularjs/1.4.7/angular-route.min.js"></script>

		<!-- Modules -->
		<script type="text/javascript" src="js/business/app.js"></script>

		<!-- Controllers -->
		<script type="text/javascript" src="js/business/controllers/MainController.js"></script>
		<script type="text/javascript" src="js/business/controllers/BookController.js"></script>

		<!-- Directives -->

		<!-- angularJs service -->

		<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
		<script type="text/javascript" src="js/business/ie10-viewport-bug-workaround.js"></script>
	</body>
</html>